<template>
    <div class="content" :class="{'content-collapse': collapse}">
        <h3>{{routeName}}</h3>
        <router-view/>
        <section class="footer">
            <span class="fontWeight">Copyright &copy 2016-2019 </span>
            <a href="http://www.wolfcode.cn/"
               target="_blank">叩丁狼</a>.
            All rights reserved.
            <p class="footer-version"><span class="fontWeight">Version</span> 1.0.0</p>
        </section>
    </div>
</template>
<script>
    import bus from './bus.js'

    export default {
        data() {
            return {
                collapse: false
            }
        },
        computed: {
            routeName() {
                return this.$route.meta.title
            }
        },

        methods: {},
        created() {
            bus.$on('collapse', msg => {
                this.collapse = msg
            })
        }
    }
</script>

<style lang="less" scoped type="text/less">
    .content {
        display: flex;
        flex-direction: column;
        position: absolute;
        box-sizing: border-box;
        top: 70px;
        left: 250px;
        bottom: 0;
        right: 0;
        transition: left .3s ease-in-out;
        background-color: #f0f0f0;
        padding: 15px 15px 8px;
        overflow-y: auto;

        h3 {
            padding: 5px;
        }

        .footer {
            font-size: 12px;
            padding-top: 8px;

            .fontWeight {
                font-weight: bold;
            }

            a {
                color: #72afd2;
                text-decoration: none;
            }

            .footer-version {
                float: right;
                padding-right: 10px;
            }
        }
    }

    .content-collapse {
        left: 65px;
    }

</style>